<template>
    <div class="shortcut-box">
        <div class="box-title">
            <div>系统统计</div>
        </div>
        <a-card :bordered="false" :style="{ width: '100%' }">
            <a-card-grid v-for="(_, index) in new Array(9)" :key="index" hoverable
                :style="{ width: '160px', margin: '15px' }">
                <a-card class="card-demo" bordered>
                    <div :style="{ height: '120px' }">
                        <div style="text-align: center;margin-top: 10px;" v-if="index == 0">
                            <img src="./home/qiyeNum.png" alt="" srcset="" style="width: 35px;height: 35px;" />
                            <div style="margin-top: 10px;">企业总数</div>
                            <h2 style="margin-top: 10px;">{{ homeData.sceneNum }}</h2>
                        </div>

                        <div style="text-align: center;margin-top: 10px;" v-if="index == 1">
                            <img src="./home/sheb.png" alt="" srcset="" style="width: 35px;height: 35px;" />
                            <div style="margin-top: 10px;">接入网关数</div>
                            <h2 style="margin-top: 10px;">{{ homeData.onlineNum + homeData.offlineNum }}</h2>
                        </div>
                        <div style="text-align: center;margin-top: 10px;" v-if="index == 2">
                            <img src="./home/trigger.png" alt="" srcset="" style="width: 35px;height: 35px;" />
                            <div style="margin-top: 10px;">传感器数据点</div>
                            <h2 style="margin-top: 10px;">{{ homeData.sensorNum }}</h2>
                        </div>
                        <div style="text-align: center;margin-top: 10px;" v-if="index == 3">
                            <img src="./home/chuf.png" alt="" srcset="" style="width: 35px;height: 35px;" />
                            <div style="margin-top: 10px;">触发器</div>
                            <h2 style="margin-top: 10px;">{{ homeData.triggerNum }}</h2>
                        </div>
                        <div style="text-align: center;margin-top: 10px;" v-if="index == 4">
                            <img src="./home/user.png" alt="" srcset="" style="width: 35px;height: 35px;" />
                            <div style="margin-top: 10px;">用户数</div>
                            <h2 style="margin-top: 10px;">{{ homeData.subUserNum }}</h2>
                        </div>
                        <div style="text-align: center;margin-top: 10px;" v-if="index == 5">
                            <img src="./home/sberror.png" alt="" srcset="" style="width: 35px;height: 35px;" />
                            <div style="margin-top: 10px;">网关故障中</div>
                            <h2 style="margin-top: 10px;">
                                {{ homeData.offlineNum / (homeData.onlineNum + homeData.offlineNum) }}%</h2>
                        </div>
                        <div style="text-align: center;margin-top: 10px;" v-if="index == 6">
                            <img src="./home/lixian.png" alt="" srcset="" style="width: 35px;height: 35px;" />
                            <div style="margin-top: 10px;">网关离线数</div>
                            <h2 style="margin-top: 10px;">{{ homeData.offlineNum }}</h2>
                        </div>
                        <div style="text-align: center;margin-top: 10px;" v-if="index == 7">
                            <img src="./home/baoj.png" alt="" srcset="" style="width: 35px;height: 35px;" />
                            <div style="margin-top: 10px;">今日报警数/已处理</div>
                            <h2 style="margin-top: 10px;">
                                {{ (homeData.solveNum + homeData.unsolveNum) }}/{{ homeData.solveNum }}</h2>
                        </div>
                        <div style="text-align: center;margin-top: 10px;" v-if="index == 8">
                            <img src="./home/baoj.png" alt="" srcset="" style="width: 35px;height: 35px;" />
                            <div style="margin-top: 10px;">历史报警数/已处理</div>
                            <h2 style="margin-top: 10px;">
                                {{ (homeData.solveNumHistory + homeData.unsolveNumHistory) }}/{{
                                homeData.solveNumHistory }}</h2>
                        </div>
                    </div>
                </a-card>
            </a-card-grid>
        </a-card>
    </div>
</template>

<script setup lang="ts">
import { onMounted } from "vue";
import { getdataCountAPI } from "@/api/modules/home/index"
onMounted(() => {
    getdataCountAPIway();
})

const homeData = ref({}) as any

async function getdataCountAPIway() {
    let res = await getdataCountAPI();
    homeData.value = res
}
</script>

<style lang="scss" scoped>
.shortcut-box {
    .card-box {
        margin-bottom: $padding;

        .shortcut-card-label {
            width: 100px;
            margin-left: 20px;
            font-size: $font-size-body-3;
            color: $color-text-2;
        }
    }

    .card-middling {
        width: 200px;
    }

    .row-center {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

.margin-left-text {
    margin-left: $margin-text;
}

.box-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: $font-size-body-3;
    color: $color-text-1;
}
</style>